<template>
    <div class="mt-20 pd-30">
        <el-form :model="form" :rules="rules" class="pb-20" ref="ruleForm">
            <div class="mobile-input">
                <el-form-item prop="mobile">
                    <el-input placeholder="请输入手机号" v-model="form.mobile">
                        <div slot="prefix">
                            <el-dropdown @command="chooseCountryCode">
                                <el-button type="primary">
                                    {{country_code[current_code].name}}
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="index" :key="index" v-for="(item,index) in country_code">{{item.name}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-input>
                </el-form-item>
            </div>
            <div class="mt-30">
                <el-form-item prop="code">
                    <el-input :maxlength="6" placeholder="请输入验证码" v-model="form.code">
                        <el-button :disabled="count_down>0" :style="buttonStyle" @click="sendSms" class="code-button" round size="mini" slot="suffix" type="info">{{button_text}}</el-button>
                    </el-input>
                </el-form-item>
            </div>
        </el-form>

        <div class="calc-margin">
            <div class="flex align-center pl-10">
                <el-checkbox v-model="agreement"></el-checkbox>
                <div class="ml-4">
                    <span>我已阅读并同意</span>
                    <span @click="popAgretment('用户协议','user_deal')" class="cursor-pointer color-pink pl-4 pr-4">用户协议</span>
                    <span>与</span>
                    <span @click="popAgretment('隐私政策','secret_deal')" class="cursor-pointer color-pink pl-4 pr-4">隐私政策</span>
                </div>
            </div>
            <div class="mt-10">
                <el-button :loading="loading" @click="toLogin" class="login-button" round>立即登录</el-button>
            </div>
        </div>
        <el-dialog :modal="false" :visible.sync="agreement_visible" center top="10vh" width="40%">
            <div class="text-center mt-30 font-18 color-333">{{agreement_title}}</div>
            <div class="mt-10 pd-20 agreement-content">
                <div v-html="agreement_content"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getStorage, setStorage } from '@/utils/storage'
export default {
    data() {
        return {
            form: {
                country_code: 86,
            },
            ruleForm: {
                mobile: '',
                code: '',
            },
            rules: {
                mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { pattern: /^\d{6}$/, message: '验证码是六位数数字', trigger: 'blur' },
                ],
            },
            loading: false,
            agreement: false,
            count_down: 0,
            current_code: 0,
            agreement_visible: false,
            agreement_content: '',
            agreement_title: '',
            deal: {
                user_deal: '',
                secret_deal: '',
            },
        }
    },
    props: {
        // deal: {
        //     Type: Object,
        //     default() {
        //         return {
        //             user_deal: '',
        //             secret_deal: '',
        //         }
        //     },
        // },

        country_code: {
            type: [Array, Object],
            default: [],
        },
    },
    mounted() {
        this.count_down = getStorage('count_down') ? getStorage('count_down') : 0
        if (this.count_down > 0) {
            this.startCountDown()
        }
    },
    computed: {
        button_text() {
            if (this.count_down > 0) {
                return this.count_down + '秒后重新获取'
            } else {
                return '获取验证码'
            }
        },
        buttonStyle() {
            if (this.count_down > 0) {
                return 'background: #eee !important;color: #999 !important;'
            } else {
                return 'background: #ffe7ec !important;color: #ff1c6d !important;'
            }
        },
    },
    methods: {
        popAgretment(title, index) {
            this.agreement_title = title
            this.agreement_content = this.deal[index]
            this.$nextTick(() => {
                this.agreement_visible = true
            })
        },
        getDeal() {
            if (this.deal.user_deal == '') {
                this.$request.get('/config/config/user_deal').then((res) => {
                    this.deal.user_deal = res.result
                })
                this.$request.get('/config/config/secret_deal').then((res) => {
                    this.deal.secret_deal = res.result
                })
            }
        },
        chooseCountryCode(value) {
            this.current_code = value
        },
        sendSms() {
            //发送短信接口
            let param = {
                country_code: this.country_code[this.current_code].code,
            }
            if (!this.form.mobile) {
                this.$message.error('请输入手机号码')
                return false
            }
            param.mobile = this.form.mobile
            this.$request.post('/auth/send_sms', param).then((res) => {
                if (this.count_down <= 0) {
                    this.count_down = 60
                }
                this.startCountDown()
            })
        },
        startCountDown() {
            const timer = setInterval(() => {
                this.count_down--
                setStorage('count_down', this.count_down, this.count_down)
                if (this.count_down <= 0) {
                    clearInterval(timer)
                }
            }, 1000)
        },
        toLogin() {
            if (!this.agreement) {
                this.$message.error('请先阅读并同意《用户协议》与《隐私政策》')
                return false
            }
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true
                    let param = {
                        country_code: this.country_code[this.current_code].code,
                        mobile: this.form.mobile,
                        code: this.form.code,
                    }
                    this.$store
                        .dispatch('user/login', param)
                        .then((res) => {
                            this.$store.state.system.login_visible = false
                        })
                        .catch((error) => {})
                        .finally((res) => {
                            this.loading = false
                        })
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.code-button {
    border: none !important;
}
.agreement-content {
    max-height: 60vh;
    overflow-y: scroll;
}
</style>